<template>
  <div class="pwd-box">
    <el-input :class="inputClass" v-model="value" type="text" @input="$emit('input', $event)" v-on="$listeners" v-bind="$attrs"/>
    <div class="eye" @click="handleTogglePwd" />
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      inputClass: 'hide-input'
    };
  },
  methods:{
    handleTogglePwd() {
      this.inputClass= this.inputClass==='hide-input'?'':'hide-input';
    }
  }
};
</script>

<style lang="less">
.hide-input {
  -webkit-text-security: disc;
}
.pwd-box {
  position: relative;
  width: 300px;
  .eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 10px;
    background: url("../../assets/eye.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>